<template>
  <div class="news-box">
    <div class="scroll-container" ref="scrollContainer" @scroll.passive="handleScroll">
      <div :style="blankFillStyle">
        <div v-for="(item,index) in showDataList" :key="index">
          <slot :thisItem="item"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "virtual-scroll",
  data() {
    return {
      allDataList: [],
      //单条数据高度
      oneHeight: 100,
      containerSize: 0,
      startIndex: 0,
      isScrollStatus: true,
    }
  },
  created() {

    this.allDataList = [];
    for (let i = 0; i < 10000; i++) {
      let item = {
        date: '2016-05-02',
        name: '王小虎' + (i + 1),
        address: '上海市普陀区金沙江路 1518 弄',
      };
      this.allDataList.push(item);
    }
  },
  mounted() {
    this.getContainerSize();
    window.onresize = this.getContainerSize;
  },
  computed: {
    /**
     * 数据结束下标
     * @returns {number}
     */
    endIndex() {
      let endIndex = this.startIndex + this.containerSize * 2;
      if (!this.allDataList[endIndex]) {
        endIndex = this.allDataList.length - 1;
      }
      return endIndex;
    },
    //展示数据列表
    showDataList() {
      let startIndex = 0;
      if (this.startIndex <= this.containerSize){
        startIndex = 0;
      }else {
        startIndex = this.startIndex - this.containerSize;
      }
      let copyDataList = Object.assign([],this.allDataList);
      let showDataList = copyDataList.splice(startIndex, this.endIndex);
      return showDataList
    },
    //空白区域样式
    blankFillStyle() {
      let startIndex = 0;
      if (this.startIndex <= this.containerSize){
        startIndex = 0;
      }else {
        startIndex = this.startIndex - this.containerSize;
      }
      return {
        paddingTop: startIndex * this.oneHeight + 'px',
        paddingBottom: (this.allDataList.length - this.endIndex) * this.oneHeight + 'px'
      }
    }
  },
  methods: {
    /**
     *  滚动行为事件
     */
    handleScroll() {
      //使用动画帧
      let self = this;
      let requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
      requestAnimationFrame(() => {
        let currentIndex = ~~(this.$refs.scrollContainer.scrollTop / this.oneHeight);
        if (this.startIndex === currentIndex) return;
        this.startIndex = currentIndex;
        debugger
        if (this.startIndex + this.containerSize > this.allDataList.length - 1) {
          this.$message.info("滚动到屏幕底部了");
        }
      });
    },
    /**
     * 获取容器最大容积
     */
    getContainerSize() {
      this.containerSize = ~~(this.$refs.scrollContainer.offsetHeight / this.oneHeight);
      console.log(this.containerSize)
    }
  }
}

</script>
<style lang="scss" scoped>
.news-box {
  width: 100%;
  max-height: 800px;
  height: 100%;

  .scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .one-new {
      text-decoration: none;
      display: block;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      border-bottom: 1px solid #eeeeee;
      padding: 14px 10px 5px;
    }
  }
}
</style>
